<template>
	<l-page class="page-card" :page.sync="queryParams.pageNum" :page-size.sync="queryParams.pageSize" :total="total" @getList="getList">
		<el-form ref="queryForm" slot="header" :model="queryParams" :inline="true" label-width="90px">
			<el-form-item label="用户ID:" prop="uuid">
				<el-input v-model.trim="queryParams.uuid" placeholder="请输入用户ID" maxlength="6" clearable show-word-limit />
			</el-form-item>
			<el-form-item label="手机号码:" prop="mobile">
				<el-input v-model.trim="queryParams.mobile" placeholder="请输入手机号" clearable maxlength="11" show-word-limit />
			</el-form-item>
			<el-form-item label="收件人名称:" prop="name">
				<el-input v-model.trim="queryParams.name" placeholder="请输入收件人名称" clearable />
			</el-form-item>
			<el-form-item label="收件人号码:" prop="tel">
				<el-input v-model.trim="queryParams.tel" placeholder="请输入收件人号码" clearable />
			</el-form-item>
			<el-form-item label="默认地址:" prop="isDefault">
				<el-select v-model="queryParams.isDefault" placeholder="请选择是否默认地址">
					<el-option label="全部" :value="null"> </el-option>
					<el-option label="是" value="1"> </el-option>
					<el-option label="否" value="0"> </el-option>
				</el-select>
			</el-form-item>

			<start-end-time ref="child" title="创建时间:" :get-time="getTime"></start-end-time>
		</el-form>

		<template slot="options">
			<l-search @search="handleQuery" @refresh="resetQuery" />
			<el-button type="primary" @click="handleExport">
				<svg-icon icon-class="export" size="16px"></svg-icon>
				导出
			</el-button>
		</template>
		<el-table v-loading="loading" stripe :data="addressList">
			<el-table-column :formatter="emptyToString" type="index" label="序号" align="center"></el-table-column>
			<el-table-column :formatter="emptyToString" label="用户ID" align="center" prop="uuid" min-width="156" />
			<el-table-column :formatter="emptyToString" label="手机号码" align="center" prop="mobile" min-width="156" />
			<el-table-column :formatter="emptyToString" label="收件人名称" align="center" prop="name" min-width="156" />
			<el-table-column :formatter="emptyToString" label="收件人手机号码" align="center" prop="tel" min-width="156" />
			<el-table-column :formatter="emptyToString" align="center" min-width="300" label="省市区">
				<template slot-scope="scope">
					{{ scope.row.provinceName + scope.row.cityName + scope.row.countyName }}
				</template>
			</el-table-column>
			<el-table-column label="详细收货地址" align="center" min-width="156">
				<template slot-scope="scope">
					<div class="multi-line" style="min-width: 180px" v-text="scope.row.addressDetail || '-'"></div>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" label="默认地址" align="center" prop="isDefault" min-width="156">
				<template slot-scope="scope">
					{{ +scope.row.isDefault === 1 ? '是' : '否' }}
				</template>
			</el-table-column>
			<!--			<el-table-column :formatter="emptyToString" width="180" label="创建时间" align="center" prop="updateTime" />-->
			<el-table-column :formatter="emptyToString" align="center" label="创建时间" min-width="200" prop="createTime">
				<template slot-scope="scope">
					<div class="w-full flex flex-col items-center">
						<span>{{ dayjs(scope.row.createTime).format('YYYY-MM-DD') }}</span>
						<span>{{ dayjs(scope.row.createTime).format('HH:mm:ss') }}</span>
					</div>
				</template>
			</el-table-column>
		</el-table>
	</l-page>
</template>

<script>
import { listAddress, exportAddress } from '@/api/mall/address';
import startEndTime from '@/components/StartEndTime';
import tableMixins from '@/mixins/table';
export default {
	name: 'Address',
	components: { startEndTime },
	mixins: [tableMixins],
	data() {
		return {
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 收货地址表格数据
			addressList: [],
			// 弹出层标题
			title: '',
			// 是否显示弹出层
			open: false,
			// 搜索参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				tel: null,
				name: null,
				mobile: null,
				uuid: null,
				isDefault: null,
				time: [],
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {
				name: [{ required: true, message: '收货人名称不能为空', trigger: 'blur' }],
				userId: [
					{
						required: true,
						message: '用户表的用户ID不能为空',
						trigger: 'blur',
					},
				],
				province: [
					{
						required: true,
						message: '行政区域表的省ID不能为空',
						trigger: 'blur',
					},
				],
				city: [
					{
						required: true,
						message: '行政区域表的市ID不能为空',
						trigger: 'blur',
					},
				],
				county: [
					{
						required: true,
						message: '行政区域表的区县ID不能为空',
						trigger: 'blur',
					},
				],
				addressDetail: [{ required: true, message: '详细收货地址不能为空', trigger: 'blur' }],
				tel: [{ required: true, message: '手机号码不能为空', trigger: 'blur' }],
				isDefault: [{ required: true, message: '是否默认地址不能为空', trigger: 'blur' }],
			},
		};
	},
	created() {
		this.getList();
	},
	methods: {
		/** 搜索收货地址列表 */
		getList() {
			if (this.queryParams.time && this.queryParams.time.length > 0) {
				this.queryParams.startTime = this.queryParams.time[0];
				this.queryParams.endTime = this.queryParams.time[1];
			}
			this.loading = true;
			listAddress(this.queryParams).then((response) => {
				this.addressList = response.data.records;
				this.total = response.data.total;
				this.loading = false;
			});
		},
		getTime(startTime, endTime) {
			this.$set(this.queryParams.time, 0, startTime);
			this.$set(this.queryParams.time, 1, endTime);
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {
				id: null,
				name: null,
				uuid: null,
				province: null,
				city: null,
				county: null,
				addressDetail: null,
				areaCode: null,
				postalCode: null,
				tel: null,
				isDefault: null,
				delFlag: null,
				createBy: null,
				createTime: null,
				updateBy: null,
				updateTime: null,
			};
			this.resetForm('form');
		},

		/** 重置按钮操作 */
		resetQuery() {
			//重置时间
			this.$refs.child.resetTime();
			this.resetForm('queryForm');
			this.handleQuery();
		},
		/** 导出按钮操作 */
		handleExport() {
			const queryParams = this.queryParams;
			this.$confirm('是否确认导出所有收货地址数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return exportAddress(queryParams);
				})
				.then((response) => {
					this.download(response.msg);
				});
		},
	},
};
</script>
